<template>
  <view class="profile-container">
    <!-- 页面头部 -->
    <view class="page-header">
      <view class="header-content">
        <text class="title">个人中心</text>
        <view class="user-info">
          <image class="avatar" :src="userInfo.avatar || '/static/images/default-avatar.png'" mode="aspectFill"></image>
          <view class="user-details">
            <text class="nickname">{{ userInfo.nickname || userInfo.username }}</text>
            <text class="role">{{ getRoleText(userInfo.role) }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 用户信息卡片 -->
    <view class="info-section">
      <view class="info-card">
        <view class="card-header">
          <text class="card-title">基本信息</text>
          <text class="edit-btn" @click="editProfile">编辑</text>
        </view>
        <view class="info-list">
          <view class="info-item">
            <text class="info-label">用户名</text>
            <text class="info-value">{{ userInfo.username }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">邮箱</text>
            <text class="info-value">{{ userInfo.email || '未设置' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">手机号</text>
            <text class="info-value">{{ userInfo.phone || '未设置' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">部门</text>
            <text class="info-value">{{ userInfo.department || '未设置' }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">注册时间</text>
            <text class="info-value">{{ userInfo.createTime }}</text>
          </view>
          <view class="info-item">
            <text class="info-label">最后登录</text>
            <text class="info-value">{{ userInfo.lastLoginTime }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 功能菜单 -->
    <view class="menu-section">
      <view class="menu-card">
        <view class="menu-item" @click="goToWorkOrders">
          <view class="menu-icon">📝</view>
          <text class="menu-text">我的工单</text>
          <text class="menu-badge">{{ workOrderCount }}</text>
          <text class="menu-arrow">></text>
        </view>

        <view class="menu-item" @click="goToAlerts">
          <view class="menu-icon">🔔</view>
          <text class="menu-text">我的告警</text>
          <text class="menu-badge alert-badge">{{ alertCount }}</text>
          <text class="menu-arrow">></text>
        </view>

        <view class="menu-item" @click="goToDevices">
          <view class="menu-icon">🏢</view>
          <text class="menu-text">我的设备</text>
          <text class="menu-arrow">></text>
        </view>
      </view>
    </view>

    <!-- 设置菜单 -->
    <view class="settings-section">
      <view class="settings-card">
        <view class="settings-item" @click="changePassword">
          <view class="settings-icon">🔐</view>
          <text class="settings-text">修改密码</text>
          <text class="settings-arrow">></text>
        </view>

        <view class="settings-item" @click="notificationSettings">
          <view class="settings-icon">🔔</view>
          <text class="settings-text">通知设置</text>
          <text class="settings-arrow">></text>
        </view>

        <view class="settings-item" @click="aboutApp">
          <view class="settings-icon">ℹ️</view>
          <text class="settings-text">关于应用</text>
          <text class="settings-arrow">></text>
        </view>
      </view>
    </view>

    <!-- 退出登录 -->
    <view class="logout-section">
      <button class="btn-logout" @click="handleLogout">
        <text class="logout-text">退出登录</text>
      </button>
    </view>

    <!-- 自定义底部导航 -->
    <SimpleTabNav :currentTab="4" />
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { useUserStore } from '@/src/store/user'
import SimpleTabNav from '@/components/SimpleTabNav.vue'

// 用户存储
const userStore = useUserStore()

// 用户信息
const userInfo = computed(() => userStore.user || {})

// 统计数据（模拟）
const workOrderCount = ref(5)
const alertCount = ref(3)

// 获取角色文本
const getRoleText = (role: string) => {
  const roleMap: Record<string, string> = {
    admin: '系统管理员',
    manager: '运营经理',
    technician: '维护技师',
    user: '普通用户'
  }
  return roleMap[role] || '未知角色'
}

// 导航功能
const goToWorkOrders = () => {
  uni.navigateTo({
    url: '/pages/work-orders/index'
  })
}

const goToAlerts = () => {
  uni.navigateTo({
    url: '/pages/alerts/index'
  })
}

const goToDevices = () => {
  uni.navigateTo({
    url: '/pages/devices/index'
  })
}

// 设置功能
const editProfile = () => {
  uni.navigateTo({
    url: '/pages/profile/edit'
  })
}

const changePassword = () => {
  uni.navigateTo({
    url: '/pages/profile/change-password'
  })
}

const notificationSettings = () => {
  uni.showToast({
    title: '功能开发中',
    icon: 'none'
  })
}

const aboutApp = () => {
  uni.navigateTo({
    url: '/pages/profile/about'
  })
}

// 退出登录
const handleLogout = () => {
  uni.showModal({
    title: '确认退出',
    content: '确定要退出登录吗？',
    success: async (res) => {
      if (res.confirm) {
        try {
          await userStore.logout()
          uni.showToast({
            title: '已退出登录',
            icon: 'success'
          })
        } catch (error) {
          uni.showToast({
            title: '退出失败',
            icon: 'none'
          })
        }
      }
    }
  })
}

// 页面显示时刷新用户信息
onShow(() => {
  if (userStore.isAuthenticated) {
    // 可以在这里刷新用户信息
    userStore.fetchUserInfo()
  }
})
</script>

<style lang="scss" scoped>
.profile-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f6ffed 0%, #e6f7ff 100%);
  padding-bottom: 40rpx;
}

// 页面头部
.page-header {
  background: linear-gradient(135deg, #52c41a, #73d13d);
  padding: 48rpx 32rpx 32rpx;
  color: #ffffff;

  .header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .title {
    font-size: 36rpx;
    font-weight: bold;
    margin-bottom: 24rpx;
  }

  .user-info {
    display: flex;
    align-items: center;
    gap: 24rpx;

    .avatar {
      width: 120rpx;
      height: 120rpx;
      border-radius: 60rpx;
      border: 4rpx solid rgba(255, 255, 255, 0.3);
      background: #ffffff;
    }

    .user-details {
      .nickname {
        display: block;
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 8rpx;
      }

      .role {
        font-size: 26rpx;
        opacity: 0.9;
      }
    }
  }
}

// 信息区域
.info-section {
  padding: 0 32rpx;
  margin-top: -40rpx;

  .info-card {
    background: #ffffff;
    border-radius: 24rpx;
    padding: 32rpx;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24rpx;
      padding-bottom: 16rpx;
      border-bottom: 1rpx solid #f0f0f0;

      .card-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
      }

      .edit-btn {
        font-size: 28rpx;
        color: #52c41a;
        font-weight: 500;
      }
    }

    .info-list {
      .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16rpx 0;
        border-bottom: 1rpx solid #f8f8f8;

        &:last-child {
          border-bottom: none;
        }

        .info-label {
          font-size: 28rpx;
          color: #666;
        }

        .info-value {
          font-size: 28rpx;
          color: #333;
          font-weight: 500;
        }
      }
    }
  }
}

// 菜单区域
.menu-section,
.settings-section {
  padding: 0 32rpx;
  margin-top: 24rpx;

  .menu-card,
  .settings-card {
    background: #ffffff;
    border-radius: 24rpx;
    overflow: hidden;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
  }

  .menu-item,
  .settings-item {
    display: flex;
    align-items: center;
    padding: 32rpx;
    border-bottom: 1rpx solid #f8f8f8;
    transition: background-color 0.3s ease;

    &:last-child {
      border-bottom: none;
    }

    &:active {
      background-color: #f8f9fa;
    }

    .menu-icon,
    .settings-icon {
      font-size: 40rpx;
      margin-right: 24rpx;
      width: 48rpx;
      text-align: center;
    }

    .menu-text,
    .settings-text {
      flex: 1;
      font-size: 30rpx;
      color: #333;
      font-weight: 500;
    }

    .menu-badge {
      background: #ff4d4f;
      color: #ffffff;
      font-size: 22rpx;
      padding: 4rpx 12rpx;
      border-radius: 12rpx;
      margin-right: 16rpx;
      min-width: 32rpx;
      text-align: center;

      &.alert-badge {
        background: #faad14;
      }
    }

    .menu-arrow,
    .settings-arrow {
      font-size: 28rpx;
      color: #999;
    }
  }
}

// 退出登录
.logout-section {
  padding: 0 32rpx;
  margin-top: 48rpx;

  .btn-logout {
    width: 100%;
    height: 88rpx;
    background: #ffffff;
    border: 2rpx solid #ff4d4f;
    border-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;

    &:active {
      background: #fff1f0;
    }

    .logout-text {
      font-size: 32rpx;
      color: #ff4d4f;
      font-weight: 500;
    }
  }
}
</style>